<script setup lang="ts">
import { ScalarButton, ScalarTooltip } from '@scalar/components'
import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'
import type { ParameterObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'
import { computed } from 'vue'

import { getParameterExample } from '@/v2/blocks/request-block/helpers/get-parameter-example'
import { getParameterSchema } from '@/v2/blocks/request-block/helpers/get-parameter-schema'
import { CollapsibleSection } from '@/v2/components/layout'

import RequestTable from './RequestTable.vue'
import type { TableRow } from './RequestTableRow.vue'

const {
  parameters,
  exampleKey,
  environment,
  title,
  globalRoute,
  showAddRowPlaceholder = true,
} = defineProps<{
  parameters: ParameterObject[]
  exampleKey: string
  title: string
  label?: string
  invalidParams?: Set<string>
  globalRoute?: string
  showAddRowPlaceholder?: boolean
  environment: XScalarEnvironment
}>()

const emits = defineEmits<{
  (e: 'add', payload: Partial<{ key: string; value: string }>): void
  (
    e: 'update',
    payload: {
      index: number
      payload: Partial<{ key: string; value: string; isEnabled: boolean }>
    },
  ): void
  (e: 'delete', payload: { index: number }): void
  (e: 'deleteAll'): void
}>()

const tableRows = computed<TableRow[]>(() =>
  parameters.map((param) => {
    const example = getParameterExample(param, exampleKey)

    return {
      name: param.name,
      value: example?.value ?? '',
      globalRoute,
      schema: getParameterSchema(param),
      isRequired: param.required,
      isDisabled: example?.['x-disabled'] ?? false,
    }
  }),
)

const showTooltip = computed(() => parameters.length > 1)
</script>
<template>
  <CollapsibleSection
    class="group/params"
    :itemCount="parameters.length">
    <template #title>{{ title }}</template>
    <template #actions>
      <div
        class="text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100">
        <ScalarTooltip
          v-if="showTooltip"
          content="Clear optional parameters"
          placement="left">
          <ScalarButton
            class="pr-0.75 pl-1 transition-none"
            size="sm"
            variant="ghost"
            @click.stop="emits('deleteAll')">
            Clear
            <span class="sr-only">All {{ title }}</span>
          </ScalarButton>
        </ScalarTooltip>
      </div>
    </template>
    <RequestTable
      class="flex-1"
      :columns="['32px', '', '']"
      :data="tableRows"
      :environment="environment"
      :exampleKey="exampleKey"
      :globalRoute="globalRoute"
      :invalidParams="invalidParams"
      :label="label"
      :showAddRowPlaceholder="showAddRowPlaceholder"
      @addRow="(payload) => emits('add', payload)"
      @deleteRow="(index) => emits('delete', { index })"
      @updateRow="(index, payload) => emits('update', { index, payload })" />
  </CollapsibleSection>
</template>
